{% extends "auth.html" %}
{% block regular_content %}
<h1>{{ class_info.name }}</h1>
<h2 class="text-4xl mt-3">{{ _('grading') }}</h2>
<p class="mt-3 mb-5 w-full md:w-2/3">
    {{ _('grading_table_explanation') }}
</p>
<form hx-get="/for-teachers/redesign/class/{{ class_info.id }}/grade/filter_sort"
    hx-target="#grade-class-table-body"
    hx-swap="innerHTML"
    hx-trigger="submit"
    hx-include="
        #adventure-sort-input, 
        #accepted-sort-input, 
        #level-sort-input, 
        #student-sort-input, 
        #name-sort-input, 
        #timestamp-sort-input, 
        #ticked-sort-input"
>
    <div class="flex flex-row gap-5 justify-between items-center">
        <div class="flex flex-row gap-14 items-center">
            <!-- LEVEL -->
            <div class="flex flex-row gap-2 w-full items-center">
                <label for="dropdown_level_button" class="text-xl font-slab leading-6 text-blue-800">{{ _('level') }}</label>
                <div id="level_button" class="dropdown relative">
                    <button type="button" class="blue-btn-new rounded inline-flex items-center w-fit gap-2 text-xl" id="dropdown_level_button"
                        onclick="$('#level_dropdown').slideToggle('medium');">
                        <span id="level-button-span">{{ _('all') }}</span> <i id="level-arrow" class="fa-solid fa-angle-down"></i>
                    </button>
                    <div class="absolute block rounded-md ltr:left-0 rtl:right-0 ltr:mr-1 rtl:ml-1 w-max overflow-y-auto p-4 shadow-lg dropdown-blue z-30 w-fit min-w-44"
                        style="display: none; margin: 0.25rem 0px 0px; padding-top: 0px; padding-right: 0px !important; padding-bottom: 0px; padding-left: 0px !important; max-height: 35rem;"
                        id="level_dropdown" style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;" 
                        _="on mutation of @style
                            set arrow to #level-arrow
                            if *display == 'none'
                            remove .rotate-180 from arrow
                            else if not arrow.classList.contains('rotate-180')
                            add .rotate-180 to arrow
                            end"
                    >
                        <div id="level_button_all"
                            class="level-select selected flex-row w-full justify-between items-center text-lg font-extralight py-1 px-2 text-center text-blue-900 ease-in transition duration-100
                                no-underline  rounded-t-lg bg-blue-200 bg-green-200 hover:bg-blue-200"
                            _="on click
                            set @data-temp-value of #level-filter-input to 'all'
                            put '{{ _('all') }}' into #level-button-span
                            remove .bg-blue-200 .selected from .level-select
                            add .bg-blue-200 .selected to me"
                        >                        
                            <span class="flex-grow">{{ _('all') }}</span>
                        </div>
                        {% for dropdown_level in range(1, 19) %}
                        <div id="level_button_{{dropdown_level}}"
                            class="level-select cursor-pointer flex-row  w-full justify-between items-center text-lg font-extralight py-1 px-2 text-center text-blue-900 ease-in transition duration-100
                                rounded-lg no-underline hover:bg-blue-200"
                            _="on click
                                set @data-temp-value of #level-filter-input to {{ dropdown_level }}
                                put '{{ dropdown_level }}' into #level-button-span
                                remove .bg-blue-200 .selected from .level-select
                                add .bg-blue-200 .selected to me"
                        >                        
                            <span class="flex-grow">{{ _('level_title') }} {{ dropdown_level }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    <input id="level-filter-input" type="hidden" name="filter_level" data-temp-value="all"  value="all">
                </div>    
            </div>
            <!-- STUDENTS -->
            <div class="flex flex-row w-full gap-2 items-center">
                <label for="dropdown_student_button" class="text-xl font-slab leading-6 text-blue-800">{{ _('students')|capitalize }}</label>
                <div id="student_button" class="dropdown relative">
                    <button type="button" class="blue-btn-new w-max rounded inline-flex items-center w-fit gap-2 text-xl"
                        id="dropdown_student_button" onclick="$('#student_dropdown').slideToggle('medium');">
                        <span id="student-button-span">{{ _('all') }}</span> <i id="student-arrow" class="fa-solid fa-angle-down"></i>
                    </button>
                    <div class="absolute block rounded-md ltr:left-0 rtl:right-0 ltr:mr-1 rtl:ml-1 w-max overflow-y-auto p-4 shadow-lg dropdown-blue z-30 w-fit min-w-44"
                        style="display: none; margin: 0.25rem 0px 0px; padding-top: 0px; padding-right: 0px !important; padding-bottom: 0px; padding-left: 0px !important; max-height: 35rem;"
                        id="student_dropdown" style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;"
                        _="on mutation of @style
                            set arrow to #student-arrow
                            if *display == 'none'
                            remove .rotate-180 from arrow
                            else if not arrow.classList.contains('rotate-180')
                            add .rotate-180 to arrow
                            end">
                        <div id="student_button_{{student}}" class="student-select selected cursor-pointer flex flex-row items-center w-full justify-between place-items-center  text-center justify-center items-center text-lg font-extralight py-1 px-2 text-blue-900 ease-in transition duration-100
                            rounded-t-lg bg-blue-200 bg-green-200 no-underline
                            hover:bg-blue-200"
                            _="on click
                                set @data-temp-value of #student-filter-input to 'all'
                                put '{{ _('all') }}' into #student-button-span
                                remove .bg-blue-200 .selected from .student-select
                                add .bg-blue-200 .selected to me"
                        >
                                <span class="flex-grow"> {{ _('all') }} </span> 
                        </div>
                        {% for student in students %}
                        <div id="student_button_{{student}}" class="student-select cursor-pointer flex flex-row  w-full justify-between items-center text-lg font-extralight py-1 px-2 text-center text-blue-900 ease-in transition duration-100
                            rounded-lg no-underline
                            hover:bg-blue-200"
                            _="on click
                                set @data-temp-value of #student-filter-input to '{{ student }}'
                                put '{{ student }}' into #student-button-span
                                remove  .bg-blue-200 .selected from .student-select
                                add .bg-blue-200 .selected to me"
                            >
                            <span class="flex-grow"> {{ student }} </span>                         
                        </div>
                        {% endfor %}
                    </div>
                    <input id="student-filter-input" type="hidden" name="filter_student" data-temp-value="all" value="all">
                </div>
            </div>
            <!-- ADVENTURES -->
            <div class="flex flex-row w-full gap-2 items-center">
                <label for="dropdown_adventure_button" class="text-xl font-slab leading-6 text-blue-800">{{ _('adventures')|capitalize }}</label>
                <div id="adventure_button" class="dropdown relative">
                    <button type="button" class="blue-btn-new w-max rounded inline-flex items-center w-fit gap-2 text-xl"
                        id="dropdown_adventure_button" onclick="$('#adventure_dropdown').slideToggle('medium');">
                        <span id="adventure-button-span">{{ _('all') }}</span> <i id="adventure-arrow" class="fa-solid fa-angle-down"></i>
                    </button>
                    <div class="absolute block rounded-md ltr:left-0 rtl:right-0 ltr:mr-1 rtl:ml-1 w-max overflow-y-auto p-4 shadow-lg dropdown-blue z-30 w-fit min-w-44"
                        style="display: none; margin: 0.25rem 0px 0px; padding-top: 0px; padding-right: 0px !important; padding-bottom: 0px; padding-left: 0px !important; max-height: 35rem;"
                        id="adventure_dropdown"
                        _="on mutation of @style
                            set arrow to #adventure-arrow
                            if *display == 'none'
                            remove .rotate-180 from arrow
                            else if not arrow.classList.contains('rotate-180')
                            add .rotate-180 to arrow
                            end">
                        <div id="adventure_button_all"
                            class="adventure-select selected cursor-pointer flex flex-row items-center w-full justify-between text-lg font-extralight py-1 px-2 text-center text-blue-900 ease-in transition duration-100
                                rounded-t-lg bg-blue-200 bg-green-200 no-underline hover:bg-blue-200"
                            _="on click
                                set @data-temp-value of #adventure-filter-input to 'all'
                                put '{{ _('all') }}' into #adventure-button-span
                                remove .bg-green-200 .bg-blue-200 .selected from .adventure-select
                                add .bg-blue-200 .selected to me"
                        >
                            <span class="flex-grow">{{ _('all') }}</span>
                        </div>
                        {% for adventure in adventures %}
                        <div id="adventure_button_{{ adventure.short_name }}"
                            class="adventure-select cursor-pointer flex flex-row w-full justify-between items-center text-lg font-extralight py-1 px-2 text-center text-blue-900 ease-in transition duration-100
                                rounded-lg no-underline hover:bg-blue-200"
                            _="on click
                                set @data-temp-value of #adventure-filter-input to '{{ adventure.short_name }}'
                                put '{{ adventure.name }}' into #adventure-button-span
                                remove .bg-blue-200 .selected from .adventure-select
                                add .bg-blue-200 .selected to me"
                        >
                            <span class="flex-grow">{{ adventure.name }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    <input id="adventure-filter-input" type="hidden" name="filter_adventure" data-temp-value="all" value="all">
                </div>
            </div>
        </div>
        <button class="blue-btn-new inline-flex items-center w-fit gap-2 text-xl" type="submit" 
        _="on click
            set value of #level-filter-input to @data-temp-value of #level-filter-input
            set value of #student-filter-input to @data-temp-value of #student-filter-input
            set value of #adventure-filter-input to @data-temp-value of #adventure-filter-input
            
            remove .bg-green-200 from .adventure-select
            remove .bg-blue-200 from <div.adventure-select.selected/>
            add .bg-green-200 to <div.adventure-select.selected/>

            remove .bg-green-200 from .level-select
            remove .bg-blue-200 from <div.level-select.selected/>
            add .bg-green-200 to <div.level-select.selected/>

            remove .bg-green-200 from .student-select
            remove .bg-blue-200 from <div.student-select.selected/>
            add .bg-green-200 to <div.student-select.selected/>
        end">
            <i class="fa-solid fa-filter"></i> <span>{{ _('filter') }}</span>
        </button>        
    </div>
</form>
<div class="mt-5">
    {{
        render_partial(
            'for-teachers/classes/htmx-grade-class-table.html',
            class_info=class_info,
            students=students,
            student_adventures=student_adventures
        )
    }}
</div>
{% endblock %}